<template>
  <div>
    <div :class="[isFullscreen ? 'screen' : 'screen screenStyle' ]">
      <span v-if="!isFullscreen" class="pointer" @click="onFullscreen(true)"><svg-icon icon-class="exit-fullscreen" /></span>
      <span v-if="isFullscreen" class="pointer" @click="onFullscreen(false)"><svg-icon icon-class="fullscreen" /></span>
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item label="" prop="filter">
          <el-select v-model="queryParams.filter" size="small" :placeholder="$t('请选择')" @change="queryHandle">
            <el-option
              v-for="dict in typeOptions"
              :key="dict.dictValue"
              :label="$t(dict.dictLabel) + '(' + dict.number + ') '"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="status">
          <div class="statusBox">
            <span
              v-for="(item ) in radioOptions"
              :key="item.dictValue"
              :style="{
                'border-color': (statusList.includes(item.dictValue) ? item.color : '#fff'),
              }"
              @click="checkedBox(item.dictValue)"
            >
              <i
                :style="{
                  'color': item.bg,
                  'background': item.color,
                  'border-color': item.color,
                }"
              >{{ item.number }}</i>{{ $t(item.dictLabel) }}
            </span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="radioOptions.length > 0"
            icon="el-icon-refresh"
            size="mini"
            type="text"
            style="border-color: #EAEAEA;color: #888888;padding: 6px 15px;"
            @click="resetQuery"
          >{{ $t("重置") }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            icon="el-icon-pie-chart"
            size="mini"
            @click="openGanttEcharts($route.query.id)"
          >{{ $t('甘特图') }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            size="mini"
            plain
            icon="el-icon-delete"
            :disabled="!checkList || checkList.length === 0"
            @click="deleteHandle(checkList)"
          >{{ $t('删除') }}</el-button>
        </el-form-item>
      </el-form>
      <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="dataRoomList"
          tooltip-effect="darkTable"
          class="dataRoomTable"
          row-key="rowId"
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChild' }"
          @cell-mouse-enter="handleCellEnter"
          @cell-mouse-leave="handleCellLeave"
        >
          <el-table-column :label="$t('文档类型')" fixed="left" align="left" prop="dirName" width="230" class-name="fileType">
            <template slot="header" slot-scope="{}">
              <label for="文档类型" class="input-checked">
                <div class="checkbox" :class="{ 'checked': checkAll, 'indeterminate': isIndeterminate }" />
                <input id="文档类型" v-model="checkAll" type="checkbox" @click="handleClick">{{ $t('文档类型') }}
              </label>
            </template>
            <template slot-scope="scope">
              <span v-if="(scope.row.hasOwnProperty('isDirName') && scope.row.isDirName === false)">
                <span class="el-icon-circle-plus-outline el-add" @click="addDirName(scope.row)"><i>{{ '添加' }}</i></span>
              </span>
              <span v-else class="check-field">
                <el-checkbox :label="scope.row.id" @change="handleCheckChange($event, scope.row)" />
                <span class="dirName item__txt">
                  <el-input v-model="scope.row.dirName" size="mini" style="width:100%;" readonly />
                </span>
                <span class="dirName item__input">
                  <el-input v-model="scope.row.dirName" size="mini" style="width:100%;" placeholder="请输入" @change="dirChangehandle($event, scope.row)" />
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')" align="left" prop="remark" width="220">
            <template slot-scope="scope">
              <div
                v-if="isNoChildren(scope.row.children) && scope.row.id"
                class="room-content remark"
                @click="inputRemark(scope.row)"
                v-html="scope.row.remark"
              />
            </template>
          </el-table-column>
          <el-table-column :label="$t('时间')" align="left" prop="dateArray" width="220">
            <template slot-scope="scope">
              <template v-if="isNoChildren(scope.row.children) && scope.row.id">
                <div class="main-room item__txt">
                  <div v-if="scope.row.dateArray && scope.row.dateArray.length > 0">
                    <el-date-picker
                      v-model="scope.row.dateArray"
                      size="mini"
                      type="datetimerange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      range-separator="/"
                      format="yyyy-MM-dd"
                      style="width: 100%;"
                      readonly
                    />
                  </div>
                </div>
                <div class="main-room item__input">
                  <el-date-picker
                    v-model="scope.row.dateArray"
                    size="mini"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    range-separator="/"
                    format="yyyy-MM-dd"
                    style="width: 100%;"
                    @change="updateData($event, 'dateArray', scope.row)"
                  />
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column :label="$t('文件')" align="center" class-name="file-column" prop="file" width="50">
            <template slot-scope="scope">
              <div v-if="isNoChildren(scope.row.children) && scope.row.id" class="link-type" @click="addFile(scope.row)">{{
                scope.row.fileCount?scope.row.fileCount:'0' }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('状态')" align="left" prop="type" width="120">
            <template slot-scope="scope">
              <template v-if="isNoChildren(scope.row.children) && scope.row.id">
                <div class="main-room item__txt">
                  <div v-if="scope.row.status" class="">
                    <div class="el-select-status">
                      <span class="el-tag el-tag--info el-tag--small el-tag--light" :style="{ 'background': formatBg(scope.row.status, 'bg'), 'color': formatBg(scope.row.status, 'color'), 'border-color': formatBg(scope.row.status, 'border') }">
                        <span class="el-select__tags-text">{{ formatType(scope.row.status) }}</span>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="main-room item__input">
                  <el-select
                    v-model="scope.row.status"
                    size="mini"
                    @change="statusChange($event, scope.row, 'status')"
                  >
                    <el-option
                      v-for="dict in radioOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column :label="$t('负责人')" align="left" prop="personChargeId" width="150">
            <template slot-scope="scope">
              <div v-if="isNoChildren(scope.row.children) && scope.row.id">
                <div class="main-room item__txt">
                  <el-select
                    v-model="scope.row.personChargeId"
                    size="mini"
                    placeholder=""
                    disabled
                  >
                    <el-option
                      v-for="item in userTree"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <div class="main-room item__input">
                  <el-select
                    v-model="scope.row.personChargeId"
                    size="mini"
                    :placeholder="$t('请选择')"
                    @change="personChargeSelect($event,scope.row)"
                  >
                    <el-option
                      v-for="item in userTree"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('评论')" align="left" prop="latestContext" min-width="200">
            <template slot-scope="scope">
              <div v-if="isNoChildren(scope.row.children) && scope.row.id" class="room-content link-type latestContext" @click="inputComment(scope.row)">{{
                scope.row.latestContext }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-checkbox-group>
    </div>
    <el-dialog
      v-el-drag-dialog
      :title="$t('文件')"
      :visible.sync="formOpen"
      width="30%"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class=""
      class="dataroom-file"
    >
      <!-- <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload> -->
      <single :data-type="'dataRoom'" upload-btn-name="点击上传" :business-id="$route.query.id" :upload-style="uploadStyle" :single-file-status="false" @appendData="appendFileData" @okPostUploadHook="okPostUploadHook" />
      <div v-loading="uploadLoading" class="mt20">
        <div v-if="tempForm.fileList && tempForm.fileList.length>0">
          <div v-for="(file,index) in tempForm.fileList" :key="file.id" class="uploadFile">
            <div class="link-type fileName" @click="onlinePreview(file)">
              <i :class="formatSuffix(file.name)" style="margin-right: 5px;" />{{ file.name }}
            </div>
            <i class="link-type el-icon-download" style="margin-right: 20px;" @click="downloadFile(file.id)" />
            <i class="link-type el-icon-delete" style="margin-right: 20px;" @click="delFile(file, index)" />
            <span class="link-type" style="margin-right: 20px;" @click="fileOrDirRecord(file)">{{ '版本' }}</span>
            <reUpload
              ref="reUploadRef"
              :get-file-object="file"
              :data-type="dataType"
              height-style="auto"
              :icon-close="false"
              upload-btn-name="更新"
              upload-style="padding: 0;border: none;font-size: 14px;font-weight: 350;color: #434eb8;"
              @okPostUploadHook="okPostUpload"
              @replaceNewFile="replaceNewFile"
            />
          </div>
        </div>
        <div style="text-align: right;margin-top: 30px;">
          <el-button @click="formOpen = false">{{ $t('取消') }}</el-button>
          <el-button type="primary" :disabled="disabledSave" @click="saveFileList">{{ $t('确定') }}</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      :title="$t('备注')"
      :visible.sync="remarkOpen"
      width="50%"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class=""
    >
      <div v-if="remarkOpen" class="">
        <EditorTxt v-model="tempForm.remark" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remarkOpen = false">{{ $t('取消') }}</el-button>
        <el-button type="primary" @click="saveRemark">{{ $t('确定') }}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      :title="$t('评论')"
      :visible.sync="commentOpen"
      width="35%"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="commentOpen"
    >
      <div class="textArea">
        <div class="task-comment-activity" style="clear: both;border-top: 0;">
          <div v-loading="commentsLoading" class="modal-row-content">
            <div v-for="(context, index) in contextList" :key="index" class="borderBottom">
              <div v-if="context.type === 'text'" class="comment-item">
                <span v-if="context.avatar !== null" class="avatar-icon">
                  <el-image :src="context.avatar" style="background: #ff000000" />
                </span>
                <span v-else class="avatar-icon" style="background-color:#84e17e;">
                  <span>{{ $t(context.createBy.nickName) }}</span>
                </span>
                <div class="comment-item-wrap">
                  <div class="comment-item-meta">
                    <a class="comment-name">
                      <span class="ng-binding">{{ $t(context.createBy.nickName) }}</span>
                    </a>
                    <span class="comment-time ng-binding">{{ context.createTime }}</span>
                  </div>
                  <div class="comment-item-content" v-html="context.context" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-detail-footer">
        <comment-editor ref="commentEditorRef" :upload="true" @submit="submitContext" @elIconRefresh="elIconRefresh" />
      </div>
    </el-dialog>
    <!--操作历史页面-->
    <el-dialog title="版本列表" :visible.sync="fileOrDirRecordLoading" top="5vh !important" width="80%" :close-on-click-modal="false" :destroy-on-close="true" :lock-scroll="false" custom-class="commentsDigOnly" append-to-body>
      <historicalFile ref="historicalFile" @close="close" />
    </el-dialog>
    <!-- 预览 -->
    <OnlinePreview ref="OnlinePreview" />

    <el-dialog :title="$t('甘特图')" :visible.sync="ganttHomeOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <ganttHome ref="ganttHome" />
    </el-dialog>

  </div>
</template>

<script>
import single from '@/components/File/Upload/single.vue'
import commentEditor from '@/components/CommentEditor'
import EditorTxt from '@/components/Tinymce'
import {
  getDdBaseList,
  getByWfNodeId,
  updateDataById,
  getFileListById,
  getDdUserList,
  addDir,
  getStatusCount,
  batchDeletionDdBase
} from '@/api/dd/data/ddBase'
import { getCommentList, saveDdComment } from '@/api/dd/data/ddComment'
import { deepClone, treeToArray } from '@/utils'
import { delFile } from '@/api/file/fileBase.js'
import { downLoadFileOpen } from '@/utils/zipdownload'
import historicalFile from '@/views/file/document/library/historicalFile.vue'
import reUpload from '@/components/File/FileTable/subassembly/reUpload.vue'
import ganttHome from '@/views/dd/data/dhtmlxGantt/Home.vue'
export default {
  components: {
    EditorTxt,
    commentEditor,
    historicalFile,
    reUpload,
    single,
    ganttHome
  },
  data() {
    return {
      fileList: [],
      dataType: 'fileLibrary',
      loading: false,
      fileLoading: false,
      fileOrDirRecordLoading: false,
      commentsLoading: false,
      fileListLoading: false,
      otherBtnHide: false,
      formOpen: false,
      commentOpen: false,
      remarkOpen: false,
      userTree: [],
      tempForm: {
        remark: undefined,
        fileList: []
      },
      form: {
        fileList: []
      },
      queryParams: {
        filter: 'all',
        status: undefined,
        dealId: this.$route.query.id
      },
      statusList: [],
      typeOptions: [
        { dictLabel: '全部', dictValue: 'all', number: '0' },
        { dictLabel: '指派给我', dictValue: 'me', number: '0' },
        { dictLabel: '本周', dictValue: 'currentWeek', number: '0' }
      ],
      radioOptions: [
        { dictLabel: '未开始', dictValue: 'notstart', number: '0', color: 'rgba(255,184,0, 1)', bg: '#fff', border: 'rgba(255,184,0, .3)' },
        { dictLabel: '有风险', dictValue: 'risk', number: '0', color: 'rgba(245,108,108, 1)', bg: '#fff', border: 'rgba(245,108,108, .3)' },
        { dictLabel: '进行中', dictValue: 'ongoing', number: '0', color: 'rgba(64,158,255, 1)', bg: '#fff', border: 'rgba(64,158,255, .3)' },
        { dictLabel: '进度落后', dictValue: 'lag', number: '0', color: 'rgba(255,153,59, 1)', bg: '#fff', border: 'rgba(255,153,59, .3)' },
        { dictLabel: '不适用', dictValue: 'notapply', number: '0', color: 'rgba(144,147,153, 1)', bg: '#fff', border: 'rgba(144,147,153, .3)' },
        { dictLabel: '完成', dictValue: 'done', number: '0', color: 'rgba(103,194,58, 1)', bg: '#fff', border: 'rgba(103,194,58, .3)' }
      ],
      defaultCheckKeys: [],
      countList: [],
      defaultProps: {
        children: 'children',
        label: 'dirName'
      },
      dataRoomList: [
      ],
      contextList: [
      ],
      checkList: [],
      isIndeterminate: false,
      checkAll: false,
      cacheData: {},
      // 上传
      uploadStyle: 'color: #fff !important;background-color: #1890ff;border-color: #1890ff;padding: 7px 15px;font-size: 12px;border-radius: 3px;',
      isFullscreen: true,
      uploadLoading: false,
      disabledSave: true,
      ganttHomeOpen: false
    }
  },
  created() {
    this.$bus.$emit('async_done')
  },
  methods: {
    checkedBox(c) {
      if (this.statusList.includes(c)) {
        this.statusList = this.statusList.filter(function(ele) { return ele !== c })
      } else {
        this.statusList.push(c)
      }
      this.queryParams.status = this.statusList.join(',')
      this.queryHandle()
    },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList)
    // },
    // handlePreview(file) {
    //   console.log(file)
    // },
    // beforeRemove(file) {
    //   return this.$confirm(`确定移除 ${ file.name }？`)
    // },
    addDirName(data) {
      // console.log(data)
      this.$set(data, 'isDirName', true)
      this.appendData(data)
      this.$forceUpdate()
    },
    appendData(data) {
      console.log(data, 99)
      // this.$set(data, 'isDirName', false)
      var dataRoomList = JSON.parse(JSON.stringify(this.dataRoomList))
      var row = {
          id: undefined,
          rowId: new Date() + ((Math.random() * 1000).toFixed(0) + ''),
          dealId: this.$route.query.id,
          dirId: undefined,
          dirName: '',
          isDirName: false,
          children: []
        }
      if (data.index === '') {
        row.index = ''
        row.id = undefined
        row.parentId = '0'
        dataRoomList.push(row)
        dataRoomList[dataRoomList.length - 2].children = [
          {
            id: undefined,
            rowId: new Date() + ((Math.random() * 1000).toFixed(0) + ''),
            parentId: data.id,
            dealId: this.$route.query.id,
            dirId: data.dirId,
            dirName: '',
            isDirName: false,
            index: dataRoomList.length - 2,
            children: []
          }
        ]
      } else {
        if (!dataRoomList[data.index].dirName) {
          this.$set(dataRoomList[data.index].children[0], 'isDirName', false)
          this.msgWarning(this.$t('请先添加上级节点中的文档类型名称！'))
        } else {
          row.id = undefined
          row.parentId = data.dirId ? data.dirId : dataRoomList[data.index].dirId
          row.rowId = new Date() + ((Math.random() * 1000).toFixed(0) + '')
          row.index = data.index
          dataRoomList[data.index].children.push(row)
        }
      }
      this.dataRoomList = dataRoomList
      this.$forceUpdate()
      this.handleCheckedChange()
    },
    init(data) {
      this.loading = true
      this.getTreeSelect()
      getByWfNodeId(data.wfNodeId).then(response => {
        this.dataRoomList = response.data.resultList || []
        this.buildData(response)
        this.$forceUpdate()
        this.loading = false
      })
    },
    // 上传后附件回显
    appendFileData(data) {
      const file = {
        id: data.fileId === undefined ? data.id : data.fileId,
        name: data.fileName === undefined ? data.name : data.fileName
      }
      this.tempForm.fileList.push(file)
      this.uploadLoading = false
      this.disabledSave = false
    },
    okPostUploadHook() {
      this.uploadLoading = true
      this.disabledSave = true
    },
    queryHandle() {
      this.loading = true
      this.refreshDataList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.statusList = []
      this.queryHandle()
    },
    refreshDataList() {
      getDdBaseList(this.queryParams).then(response => {
        this.dataRoomList = response.data.resultList || []
        this.buildData(response)
        this.loading = false
      })
    },
    buildData(response) {
      console.log(response)
      this.dataRoomList.forEach((ele, index) => {
          if (ele.children && ele.children.length > 0) {
            var _row = {
              id: undefined,
              rowId: new Date() + ((Math.random() * 1000).toFixed(0) + ''),
              parentId: ele.dirId,
              dirId: ele.dirId,
              dealId: this.$route.query.id,
              dirName: '',
              isDirName: false,
              index: index,
              children: []
            }
            ele.children.push(_row)
          } else {
            if (ele.dirName) {
              ele.children = [
                {
                  id: undefined,
                  rowId: new Date() + ((Math.random() * 1000).toFixed(0) + ''),
                  parentId: ele.dirId,
                  dirId: ele.dirId,
                  dealId: this.$route.query.id,
                  dirName: '',
                  isDirName: false,
                  index: index,
                  children: []
                }
              ]
            }
          }
        })
        var row = {
          id: undefined,
          rowId: new Date() + ((Math.random() * 1000).toFixed(0) + ''),
          parentId: '0',
          dealId: this.$route.query.id,
          dirName: '',
          isDirName: false,
          index: '',
          children: []
        }
        this.dataRoomList.push(row)
        this.getStatusCountByDealId()
    },
    getStatusCountByDealId() {
      getStatusCount(this.$route.query.id).then(response => {
        if (response.code === 200 && response.data) {
            this.countList = response.data.countInfo
            // 遍历radioOptions数组
            this.radioOptions.forEach((option) => {
              // 如果count对象有对应的键
              if (this.countList[option.dictValue]) {
                // 设置number属性为对应的值
                option.number = this.countList[option.dictValue]
              } else {
                option.number = 0
              }
            })
            this.typeOptions[0].number = response.data.allCount
            this.typeOptions[1].number = response.data.assignMeCount
            this.typeOptions[2].number = response.data.currentWeek
          }
          this.$forceUpdate()
      })
    },
    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(row, select)
        })
      }
    },
    submitContext(text) {
      this.$nextTick(() => {
        this.$refs.commentEditorRef.emptyCommentContent()
      })
      // 保存评论
      console.log(text)
      const data = {
        context: text,
        type: 'text',
        ddId: this.tempForm.id,
        dealId: this.tempForm.dealId
      }
      saveDdComment(data).then(response => {
        if (response.code === 200) {
          this.msgSuccess(this.$t('评论成功'))
          this.elIconRefresh()
        } else {
          this.msgError(response.msg)
        }
      })
      setTimeout(() => {
        this.refreshDataList()
      }, 500)
    },
    elIconRefresh() {
      this.refreshCommentList(this.tempForm)
    },
    formatBg(key, e) {
      var row = this.radioOptions.find(v => v.dictValue === key)
      if (row) {
        return row[e]
      }
    },
    formatType(key) {
      var row = this.radioOptions.find(v => v.dictValue === key)
      if (row) {
        return row.dictLabel
      }
    },
    isNoChildren(children) {
      if (!children) {
        return true
      } else if (children.length === 0) {
        return true
      }
      return false
    },
    addFile(row) {
      this.formOpen = true
      this.disabledSave = true
      this.tempForm.fileList = []
      this.uploadLoading = true
      this.tempForm = row
      getFileListById(this.tempForm.id).then(response => {
        if (response.code === 200 && response.data) {
          this.tempForm.fileList = response.data
        }
        this.uploadLoading = false
      })
    },
    // 预览附件
    onlinePreview(row) {
      var id = row.id
      if (id === null || id === undefined || id === '') {
        id = row.fileId
      }
      this.$refs.OnlinePreview.onlinePreviewFile(id)
    },
    inputRemark(row) {
      this.remarkOpen = true
      this.tempForm = row
    },
    inputComment(row) {
      this.commentOpen = true
      this.tempForm = row
      this.refreshCommentList(row)
    },
    refreshCommentList(row) {
      this.commentsLoading = true
      const queryParams = {
        ddId: row.id
      }
      // 查询所有评论
      getCommentList(queryParams).then(response => {
        this.$set(this, 'contextList', response.data)
        this.$forceUpdate()
        this.commentsLoading = false
      }).catch(() => {
        this.commentsLoading = false
      })
    },
    saveRemark() {
      this.remarkOpen = false
      this.updateData(this.tempForm.remark, 'remark', this.tempForm)
    },
    async saveFileList() {
      this.formOpen = false
      await this.updateData(this.tempForm.fileList, 'fileList', this.tempForm)
      setTimeout(() => {
        this.refreshDataList()
      }, 500)
    },
    updateData(val, property, row) {
      // console.log(val, property, row)
      var index = row.index
      // eslint-disable-next-line no-prototype-builtins
      if (row.dirName && !row.hasOwnProperty('id')) { // 如果录入了分类名称 保存到后台
        if (index !== null && index !== undefined && index !== '') {
          row.parentId = row.dirId ? row.dirId : this.dataRoomList[index].dirId
        }
        addDir(row).then(response => {
          if (response.code === 200) {
            this.$set(row, 'id', response.data.id)
            this.$set(row, 'dirId', response.data.dirId)
            row.index = index
          }
        })
      }
      if (row.id) {
        const data = {
          id: row.id,
          dateArray: row.dateArray
        }
        this.$set(data, property, val)
        updateDataById(data).then(response => {
          if (response.code === 200) {
            this.msgSuccess(this.$t('保存成功'))
            this.getStatusCountByDealId()
            this.loading = false
          } else {
            this.msgError(response.msg)
            this.loading = false
          }
        }).catch(() => {
          this.loading = false
        })
      }
    },
    /** 查询负责人tree */
    getTreeSelect() {
      getDdUserList(this.$route.query.id).then(response => {
        this.userTree = response.data || []
        // this.userTree = treeToArray(deepClone(userTree)).filter(item => item.children === null)
        this.$forceUpdate()
      })
    },
    formatPersonChargeId(id) {
      const row = this.userTree.find(item => item.id === id)
      if (row) {
        return row.label
      }
    },
    normalizer(node) {
      // 去掉children=null的属性
      if (!node.children) {
        delete node.children
      }
    },
    personChargeSelect(val, row) {
      this.updateData(val, 'personChargeId', row)
      this.$forceUpdate()
    },
    handleClick(ev) { // 全选
      var dataRoomList = treeToArray(deepClone(this.dataRoomList)).filter(item => item.dirName)
      if (ev.target.checked) {
        const ids = dataRoomList.map(item => (item.id))
        this.checkList = ids
        this.checkAll = true
      } else {
        this.checkList = []
        this.checkAll = false
      }
      this.isIndeterminate = false
    },
    handleCheckChange(is, data) { // 关联子节点
      if (data.children.length > 0) {
        const arr = data.children.filter(item => item.dirName)
        const childrenids = arr.map(item => (item.id))
        if (is) {
          this.checkList = [...this.checkList, ...childrenids]
        } else {
          this.checkList = this.checkList.filter(v => childrenids.findIndex(el => el === v) === -1)
        }
      }
    },
    handleCheckedChange() {
      var dataRoomList = treeToArray(deepClone(this.dataRoomList)).filter(item => item.dirName)
      const ids = dataRoomList.map(item => (item.id))
      this.checkAll = this.checkList.length === ids.length
      this.isIndeterminate = this.checkList.length > 0 && this.checkList.length < ids.length
    },
    /** 鼠标移入cell */
    handleCellEnter(row, column, cell) {
      const property = column.property
      if (property === 'dateArray' || property === 'type' || property === 'personChargeId' || property === 'dirName') {
        if (cell.querySelector('.item__txt') && cell.querySelector('.item__txt').style) {
          cell.querySelector('.item__txt').style.display = 'none'
          cell.querySelector('.item__input').style.display = 'block'
        }
      }
    },
    /** 鼠标移出cell */
    handleCellLeave(row, column, cell) {
      const property = column.property
      if (property === 'dateArray' || property === 'type' || property === 'personChargeId' || property === 'dirName') {
        if (cell.querySelector('.item__txt') && cell.querySelector('.item__txt').style) {
          cell.querySelector('.item__txt').style.display = 'block'
        cell.querySelector('.item__input').style.display = 'none'
        }
      }
    },
    statusChange(val, row, type) {
      if (type === 'status') {
        row.isType = false
      }
      this.updateData(val, 'status', row)
      this.$forceUpdate()
    },
    formatSuffix(fileName) {
      var suffix = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
      console.log(suffix)
      if (suffix === 'doc' || suffix === 'docx') {
        return 'el-icon-doc'
      } else if (suffix === 'xls' || suffix === 'xlsx') {
        return 'el-icon-excel'
      } else if (suffix === 'pdf' || suffix === 'ofd') {
        return 'el-icon-pdf'
      } else if (suffix === 'zip' || suffix === '7z' || suffix === 'rar') {
        return 'el-icon-zip'
      } else if (suffix === 'mp4' || suffix === 'flv') {
        return 'el-icon-mp4'
      } else if (suffix === 'txt') {
        return 'el-icon-txt'
      } else if (suffix === 'png' || suffix === 'jpg' || suffix === 'jpge') {
        return 'el-icon-img'
      } else if (suffix === 'ppt' || suffix === 'pptx') {
        return 'el-icon-ppt'
      } else {
        return 'el-icon-other'
      }
    },
    // 下载附件
    downloadFile(fileId) {
      downLoadFileOpen(fileId)
    },
    // 删除附件
    delFile(row, index) {
      this.uploadLoading = true
      delFile(row.id).then(response => {
        this.msgSuccess(this.$t(response.msg))
        this.uploadLoading = false
      })
      this.tempForm.fileList.splice(index, 1)
    },
    dirChangehandle(val, row) {
      this.updateData(val, 'dirName', row)
    },
    // 查看操作历史
    fileOrDirRecord(row) {
      this.fileOrDirRecordLoading = true
      this.title = this.$t('操作历史')
      this.$nextTick(() => {
        this.$refs.historicalFile.fileDirId = row.id
        this.$refs.historicalFile.initVersion()
      })
    },
    // 文件版本还原操作完成后刷新页面
    close() {
      this.fileOrDirRecordLoading = false
      // 刷新附件列表
      this.refreshFileList()
    },
    // 刷新附件列表
    refreshFileList() {
      this.tempForm.fileList = []
      this.uploadLoading = true
      getFileListById(this.tempForm.id).then(response => {
        if (response.code === 200 && response.data) {
          this.tempForm.fileList = response.data
          this.disabledSave = false
        }
        this.uploadLoading = false
      })
    },
    // 重新上传loading
    okPostUpload() {
      this.fileLoading = true
      this.uploadLoading = true
      this.disabledSave = true
    },
    // 刷新重新上传的文件
    replaceNewFile(data) {
      if (data === null || data === undefined) {
        this.msgError(this.$t('没有发现被替换的文件!'))
      } else {
        // 刷新附件列表
        this.refreshFileList()
      }
    },
    openGanttEcharts(val) {
      const dealId = this.isNotEmpty(val) ? val : this.$route.query.id
      this.ganttHomeOpen = true
      this.$nextTick(() => {
        this.$refs.ganttHome.init(dealId)
      })
    },
    isNotEmpty(val) {
      return val !== undefined && val !== null && val !== ''
    },
    onFullscreen(is) {
      this.isFullscreen = is
    },
    deleteHandle(ddBaseIds) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return batchDeletionDdBase(ddBaseIds)
      }).then(() => {
        this.refreshDataList()
        this.msgSuccess(this.$t('删除成功'))
      }).catch(function() {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-upload {
    text-align: left;
}
.tag-type {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 15px;
  color: #000;
}

/deep/.room-content {
  cursor: pointer;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: pre;
  p{
    margin: 0;
  }
}
.latestContext{
  overflow: hidden;
  text-overflow: ellipsis;
}
.remark{
  border: 1px solid transparent;
  overflow: hidden;
  padding: 0 5px;
  &:hover{
    border: 1px solid #c0c4cc;
    border-radius: 4px;
    padding: 0 5px;
    cursor: pointer;
  }
}

/deep/.query-checkbox {
  // .el-radio__input {
  //   display: none;
  // }

  // .el-radio__label {
  //   padding-left: 0;
  //   display: flex;
  //   align-items: center;
  //   column-gap: 3px;
  //   font-size: 13px;
  // }
}

.prefix-number {
  // background: #000;
  // color: #fff;
  font-style: normal;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
}

/deep/.el-table {
  border: 1px solid #F0F3F7;
  td{
    border-bottom: 1px solid transparent;
    .cell {
      min-height: 42px!important;
    }
  }
  .el-table__row.expanded td{
    border-bottom: 1px solid #F0F3F7;
  }
  th,td{
    border-right: 1px solid #F0F3F7;
  }
  .el-table__header th {
    background-color: #F7F9FA !important;
    color: #888888!important;
    border-bottom: 1px solid #F0F3F7;
  }
  td.el-table__cell div {
    min-height: 20px;
  }
  td.file-column{
    position: relative;
    .cell {
      position: absolute;
      padding: 0px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      .link-type{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  td.remark-column{
    .cell {
      padding: 0;
      .cellDiv{
        cursor: pointer;
        padding: 5px;
        min-height: 42px;
      }
    }
  }
}

/deep/.commentOpen {
  .el-dialog__body {
    // background: #f7f8fa;
    padding: 0 !important;
    height: 70vh;

    .textArea {
      height: calc(100% - 130px);
      overflow: auto;
      position: relative;
      padding-top: 15px;
    }

    .modal-detail-footer {
      border-top: 1px #eee solid;
      padding: 10px 20px;
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #fff;
      height: 130px;
    }
  }
}

.avatar-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 32px;
  font-size: 12px;
  vertical-align: middle;
  display: inline-block;
  color: #fff;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

/deep/ .dataRoomTable {
  td {
    padding: 0!important;
    .cell{
      padding: 7px 10px;
    }
  }

  .fileType {
    border-bottom: 0;
    border-right-color: rgba(0,0,0,.1);
  }
}
/deep/.input-checked{
  font-weight: bold;
  color: #888;
  font-size: 13px;
  display: flex;
  align-items: center;
  .checkbox{
    display: inline-block;
    margin-right: -5px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    width: 14px;
    height: 14px;
    background-color: #fff;
    position: relative;
  }
  .checked{
    background-color: #409eff;
    border-color: #409eff;
    &::after{
      content: "";
      border: 1px solid #fff;
      border-left: 0;
      border-top: 0;
      height: 7px;
      left: 4px;
      position: absolute;
      top: 1px;
      width: 4px;
      transform-origin: center;
      transform: rotate(45deg) scaleY(1);
    }
  }
  .indeterminate{
    background-color: #409eff;
    border-color: #409eff;
    &::after{
      content: "";
      position: absolute;
      display: block;
      background-color: #fff;
      height: 2px;
      transform: scale(.5);
      left: 0;
      right: 0;
      top: 5px;
    }
  }
  input{
    opacity: 0;
  }
}
.item__input{
  display: none;
}
.statusBox{
  span{
    display: inline-block;
    margin-right: 10px;
    background: #fff;
    // border: 1px solid rgba(136,136,136,0.2);
    font-size: 12px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #909399;
    // padding: 2px 10px;
    // border-radius: 2px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 15px;
    padding: 3px 10px;
    i{
      font-style: normal;
      height: 22px;
      display: inline-block;
      border: 1px solid #eee;
      border-radius: 15px;
      padding: 2px 7px;
      display: inline-flex;
      align-items: center;
      margin-right: 5px;
    }
  }
  .checked {
    // color: #1890ff;
    // background-color: rgba(217, 236, 255, 1);
  }
}
.el-icon-circle-plus-outline{
  color: #999;
  font-size: 12px;
  cursor: pointer;
  i{
    font-style: normal;
    display: inline-block;
    padding-left: 3px;
  }
}

.dataroom-file .el-card {
  border: none;
}
/deep/.check-field{
  display: inline-flex;
  align-items: center;
  column-gap: 7px;
  width: calc(100% - 40px);
  .el-checkbox__label{
    display: none;
  }
  .dirName{
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
    cursor: pointer;
  }
}
.uploadFile{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 13px;
  .fileName{
    flex: 1;
    display: flex;
    align-items: center;
  }
}
/deep/.dirName {
  input {
    background-color: transparent!important;
  }
  .el-input__inner{
    background-color: transparent!important;
    border-left: 0!important;
    border-top: 0!important;
    border-right: 0!important;
    padding: 0!important;
    border-radius: 0;
    height: 23px!important;
    line-height: 23px!important;
    font-size: 13px!important;
    .el-icon-time{
      display:none;
    }
  }
}
/deep/.el-table {
  input {
    background-color: transparent!important;
  }
  .el-input__inner{
    background-color: transparent!important;
    font-size: 13px!important;
    padding: 0 10px;
    .el-icon-time{
      display:none;
    }
  }
  .el-date-editor {
    .el-range-input {
      font-size: 13px!important;
      width: 42%!important;
    }
    .el-range-separator {
      line-height: 28px;
    }
  }
  .item__txt{
    .el-input__inner{
      border-color: transparent!important;
    }
    .el-select__caret{
      display:none;
    }
    .el-input.is-disabled .el-input__inner {
      color: #606266!important;
    }
    .el-select-status{
      height: 28px;
      border: 1px solid transparent;
      width: 100%;
    }
  }
  .latestContext{
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.pointer{
  position: absolute;
  right: 15px;
  top: 10px;
  z-index: 9;
  .svg-icon{
    font-size: 12px;
    cursor: pointer;
  }
}

.screenStyle{
  background: #fff!important;
  padding: 20px!important;
  margin: 0;
  bottom: 0;
  overflow: auto;
}

</style>
